<template>
  <div class="banner">
    <div class="bannerTop">
      <!-- 搜索框 -->
      <a-input-search
        class="search"
        v-model:value="keywords"
        :placeholder="$t('search.placeholder')"
        enter-button
        @search="onSearch"
        allowClear
      />
      <!-- 跳转添加 -->
      <a-button type="primary" @click="toAdd">
        <template #icon>
          <PlusOutlined />
        </template>
        添加</a-button
      >
    </div>
    <!-- 表格数据 -->
    <a-table
      :columns="columns"
      :rowKey="(record) => record.id"
      :data-source="data"
      :row-selection="rowSelection"
      :pagination="false"
    >
      <!-- 操作 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button-group>
            <a-button size="small" ghost type="primary">编辑</a-button>
            <a-button size="small" ghost danger @click="remove(true, record)"
              >删除</a-button
            >
          </a-button-group>
        </template>

        <template v-if="column.dataIndex === 'pic'">
          <a-image :width="60" :height="60" :src="record.pic" />
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag color="#87d068" v-if="record.status">开启</a-tag>
          <a-tag color="#f50" v-else>关闭</a-tag>
        </template>
      </template>
    </a-table>
    <div class="footer">
      <a-button :disabled="selectedData.length === 0" @click="remove(false)">
        删除选中
      </a-button>
      <a-pagination
        :total="total"
        v-model:page-size="pageSizeRef"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
      >
        <template #itemRender="{ type, originalElement }">
          <a v-if="type === 'prev'">上一页</a>
          <a v-else-if="type === 'next'">下一页</a>
          <component :is="originalElement" v-else></component>
        </template>
        <template #buildOptionText="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, createVNode } from "vue";
import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import columns from "./table.config";
import { useRouter } from "vue-router";
import { getBanneListApi, delBannerApi } from "../../../api/banner";
import { handlerPicPath } from "../../../utils/tools";
const keywords = ref("");
const selectedData = ref([]);
const data = ref([]);
// 当前页
const page = ref(1);
// 每页多少条
const limit = ref(2);
const total = ref(0);
const pageSizeRef = ref(1);
const pageSizeOptions = ref(["1", "2", "3", "4", "5"]);
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
  pageSizeRef.value = pageSize;
};

//请求数据
const getList = async () => {
  const params = {
    page: page.value,
    limit: limit.value,
    keyword: keywords.value,
  };
  const res = await getBanneListApi(params);
  data.value = handlerPicPath(res.data);
  total.value = res.total;
};
getList();

// 删除 多选或单个
const remove = (isOne, record) => {
  const params = [];
  let message = "";
  if (isOne) {
    // 单选
    const { name, id } = record;
    params.push(id);
    message = name;
  } else {
    // 多选
    const ids = selectedData.value.map((item) => item.id);
    params.push(...ids);
    message = ids.length + "条数据";
  }
  // 拦截弹框 -
  Modal.confirm({
    title: "温馨提示：",
    icon: createVNode(ExclamationCircleOutlined),
    content: `确认要删除吗?【${message}】`,
    async onOk() {
      try {
        return await delBannerApi([id]).then((res) => {
          console.log();
          if (res.affected > 0) {
            // 删除成功
            message.success("恭喜你，操作成功");
          } else {
            // 删除失败
            message.fail("操作失败");
          }
          // 刷新页面
          getList();
        });
      } catch (e) {
        console.log(e);
      }
    },
    onCancel() {},
    // 点击外围关闭
    maskClosable: true,
  });
};

// 多选
const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys, selectedRows) => {
    selectedData.value = selectedRows;
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    selectedData.value = selectedRows;
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    selectedData.value = selectedRows;
    console.log(selected, selectedRows, changeRows);
  },
});
// 分页
const current = ref(1);

// 搜索
const router = useRouter();
const toAdd = () => {
  router.push({ name: "bannerAdd" });
};

const onSearch = () => {
  getList();
};
</script>

<style scoped lang="less">
.banner {
  padding: 10px 20px;
  .bannerTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search {
      max-width: 300px;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    background-color: #fff;
  }
}
</style>
